<template>
  <div style="display:flex;justify-content: center;">
    <el-form :ref="'form'" :model="form" label-width="80px" style="border: 1px solid #ccc; padding: 20px; ">
      <el-form-item
          label="设备名称"
          prop="name"
          :rules="[
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ]"
      >
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type"
                    :rules="[{ required: true, message: '请选择设备类型', trigger: 'change' }]">
        <el-select v-model="form.type" placeholder="请选择设备类型">
          <el-option v-for="item in assertType" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
          label="申请时间"
          prop="addtime"
          :rules="[
          { required: true, message: '请选择申请时间', trigger: 'change' },
        ]"
      >
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.addtime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item
          label="价格"
          prop="price"
          :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]"
      >
        <el-input-number v-model="form.price"
                         controls-position="right" :min="0" :precision="2"></el-input-number>
      </el-form-item>
      <el-form-item
          label="设备图片"
          :rules="[
          { required: true, message: '请选择设备图片', trigger: 'change' },
        ]"
      >
        <el-upload ref="upload"
            class="avatar-uploader"
            :action="local+'/file/upload'"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleAvatarSuccess"
            list-type="picture" accept="image/png, image/jpeg"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="申请理由">
        <el-input
            type="textarea"
            v-model="form.subscibeReason"
            style="width: 300px"
            :rows="5"
            placeholder="填写理由"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {AssetType, getUser, LocalHost} from "@/utils/tools";

export default {
  name: "SubmitApplicance",
  data() {
    return {
      local: LocalHost,
      assertType: AssetType,
      fileList: [],
      form: {
        name: null,
        type: null,
        addtime: null,
        price: null,
        application: null,
        subscibeReason: "由于工作需要，需要采购新设备",
        picture: null,
      },
    };
  },
  methods: {
    onSubmit() {
      let user = getUser();
      this.form.application = user.loginName;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.price <= 0) {
            this.$message.error("价格必须为正数");
            return; // 如果价格不是正数，则停止继续执行提交逻辑
          }
          // 在这里处理表单提交逻辑
          this.request.post("/subscribe", this.form).then((res) => {
            if (res.data) {
              this.clearForm();
              this.$message.success("提交成功", 5000);
            } else {
              this.$message.error("提交失败");
            }
          });
        } else {
          this.$message.error("表单填写有误，请检查");
        }
      });
    },
    handleExceed(file, fileList) {
      this.$message.warning("只能上传一张图片"); // 提示用户已经超出上传限制
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
    },
    handleAvatarSuccess(res) {
      this.form.picture = res;
    },
    clearForm() {
      Object.keys(this.form).forEach((key) => this.form[key] = null);
      this.$refs.form.resetFields();
      this.form.subscibeReason='由于工作需要，需要采购新设备'
      this.$refs.upload.clearFiles();
    }
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>